<template>
  <div>
    <div class="appointment-management">
      <h2>预约信息管理</h2>

      <!-- 预约信息列表 -->
      <el-card class="appointment-card">
        <h3 slot="header">预约信息列表</h3>
        <el-table :data="appointments" style="width: 100%">
          <el-table-column prop="id" label="预约编号"></el-table-column>
          <el-table-column prop="name" label="顾客姓名"></el-table-column>
          <el-table-column prop="date" label="预约时间"></el-table-column>
          <el-table-column prop="type" label="预约类型"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="editAppointment(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="deleteAppointment(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 新增预约信息 -->
      <el-card class="appointment-card">
        <h3 slot="header">新增预约信息</h3>
        <el-form :model="newAppointment" label-position="left" label-width="80px">
          <el-form-item label="顾客姓名">
            <el-input v-model="newAppointment.name"></el-input>
          </el-form-item>
          <el-form-item label="预约时间">
            <el-date-picker v-model="newAppointment.date" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="预约类型">
            <el-select v-model="newAppointment.type" placeholder="选择预约类型">
              <el-option label="美甲" value="美甲"></el-option>
              <el-option label="理发" value="理发"></el-option>
              <el-option label="SPA" value="SPA"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAppointment">新增</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 编辑预约信息 -->
      <el-dialog :visible.sync="editDialogVisible" title="编辑预约信息">
        <el-form :model="currentAppointment" label-position="left" label-width="80px">
          <el-form-item label="顾客姓名">
            <el-input v-model="currentAppointment.name"></el-input>
          </el-form-item>
          <el-form-item label="预约时间">
            <el-date-picker v-model="currentAppointment.date" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="预约类型">
            <el-select v-model="currentAppointment.type" placeholder="选择预约类型">
              <el-option label="美甲" value="美甲"></el-option>
              <el-option label="理发" value="理发"></el-option>
              <el-option label="SPA" value="SPA"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveAppointment">保存</el-button>
        </div>
      </el-dialog>

      <!-- 删除预约信息 -->
      <el-dialog :visible.sync="deleteDialogVisible" title="删除预约信息">
        <p>您确定要删除预约编号为 {{ currentAppointment.id }} 的预约信息吗？</p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDeleteAppointment">删除</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayManage',

  data () {
    return {
      appointments: [
        { id: '001', name: '张三', date: '2023-04-15 10:00', type: '美甲' },
        { id: '002', name: '李四', date: '2023-04-16 14:00', type: '理发' },
        { id: '003', name: '王五', date: '2023-04-17 16:00', type: 'SPA' }
      ],
      newAppointment: {
        name: '',
        date: '',
        type: ''
      },
      editDialogVisible: false,
      deleteDialogVisible: false,
      currentAppointment: {}
    }
  },

  mounted () {

  },

  methods: {
    addAppointment () {
      if (this.newAppointment.name && this.newAppointment.date && this.newAppointment.type) {
        const newId = '00' + (this.appointments.length + 1)
        this.appointments.push({ id: newId, ...this.newAppointment })
        this.newAppointment = { name: '', date: '', type: '' }
        this.$message.success('预约信息添加成功！')
      } else {
        this.$message.warning('请填写完整预约信息！')
      }
    },
    editAppointment (appointment) {
      this.currentAppointment = { ...appointment }
      this.editDialogVisible = true
    },
    saveAppointment () {
      const index = this.appointments.findIndex(a => a.id === this.currentAppointment.id)
      if (index >= 0) {
        this.appointments[index] = { ...this.currentAppointment }
        this.currentAppointment = {}
        this.editDialogVisible = false
        this.$message.success('预约信息修改成功！')
      } else {
        this.$message.error('预约信息不存在！')
      }
    },
    deleteAppointment (appointment) {
      this.currentAppointment = { ...appointment }
      this.deleteDialogVisible = true
    },
    confirmDeleteAppointment () {
      const index = this.appointments.findIndex(a => a.id === this.currentAppointment.id)
      if (index >= 0) {
        this.appointments.splice(index, 1)
        this.currentAppointment = {}
        this.deleteDialogVisible = false
        this.$message.success('预约信息删除成功！')
      } else {
        this.$message.error('预约信息不存在！')
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
